<template>
	<view class="page">
		<!-- 轮播图 begin -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="carousel">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.image" class="carousel"></image>
			</swiper-item>
			
		</swiper>
		<!-- 轮播图 end -->
		
		<!-- 正在热映 begin -->
		<!-- <scrollPoster tagTitle = "正在热映" movieUrl="in_theaters"></scrollPoster> -->
		<!-- 正在热映 end -->
		
		<!-- 即将上映 begin -->
		<!-- <scrollPoster tagTitle = "即将上映" movieUrl="coming_soon"></scrollPoster> -->
		<!-- 即将上映 end -->

		<!-- 新片榜 begin -->
		<scrollPoster tagTitle = "新片榜" movieUrl="new_movies"></scrollPoster>
		<!-- 新片榜 end -->

		<!-- top250 begin -->
		<!-- <scrollPoster tagTitle = "top250" movieUrl="top250"></scrollPoster> -->
		<!-- top250 end -->


<!-- 新片榜 -->
		<view class="page-block">
			<view class="  super-hot">
				<view class="hot-title-wapper">
					<image src="../../static/icos/guess-u-like.png" class="hot-icon"></image>
					<view class="hot-title">
						新片榜
					</view>
				</view>
			</view>
			<view class="page-block guess-u-like">
				<view class="single-like-movie" v-for="(item,gindex) in likeList" :key="gindex">
					<image :src="item.images.small" class="like-movie"></image>
					
					<view class="movie-desc">
						<view class="movie-title">
							{{item.original_title}}
						</view>
						<view class="new_movie_rate">
							<uni-rate disabled="true" :value="item.rating.average/2" size="14" class="hot-rate"></uni-rate>
							<text class="new_movie_rate_num">{{item.rating.average}}</text>
						</view>
						
						
						<view class="movie-info">
							{{item.year}}  
							<text space="nbsp" v-for="(tag,index) in item.genres" :key="index">&nbsp;&nbsp;/{{tag}}</text>
							
						</view>
						<view class="movie-info">
							主演：
							<text v-for="(cast,index) in item.casts" :key="index">&nbsp;&nbsp;{{cast.name}}/</text>
							
						</view>
					</view>
					
					<view class="movie-oper" :data-gindex="gindex" @click="praiseMe">
						<image src="../../static/icos/praise.png" class="praise-ico"></image>
						<view class="praise-me">
							点赞
						</view>
						
						<!-- <view :animation="animationData" class="praise-me animation-opacity">
							+1
						</view> -->
						
						<view :animation="animationDataArr[gindex]" class="praise-me animation-opacity">
							+1
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
			
<!-- 新片榜 -->




	</view>
</template>

<script>
	
	
	import uniRate from "@/components/uni-rate/uni-rate.vue";
	import scrollPoster from '../../components/scrollPoster.vue';
	
	export default {
		data() {
			return {
				swiperList:[
					{
						"id":1,
						"movieID":"xxx",
						"image":"https://img1.doubanio.com/view/photo/m/public/p2548388478.jpg",
						"sort":1,
						"isShow":1
					},
					{
						"id":2,
						"movieID":"xxx",
						"image":"https://img1.doubanio.com/view/photo/m/public/p2548388478.jpg",
						"sort":1,
						"isShow":1
					}
				],
				animationData: {},
				animationDataArr:[
					{},{},{},{},{}
				],
				likeList:[]
			}
		},
		onPullDownRefresh(){
			this.refush_new_movies();
		},
		onReachBottom(){
			this.refush_new_movies();
		},
		onLoad() {
			
			
			//从公共common.js获取
			//var serverUrl = common.severUrl;
			
			//从公共Vue.prototype获取
			//var serverUrl = this.serverUrl;
			
			//请求轮播图数据
			/* uni.request({
				//url: serverUrl+'/v2/movie/coming_soon?count=10',
				url : serverUrl ,
				//url: "https://douban-api.zce.now.sh/v2/movie/top250",

				method: 'GET',
				data: {'url_param':'/v2/movie/top250?count=10'},
				
				success: res => {
					console.log(res);
					
					if(res.statusCode == 200){
						this.swiperList = res.data.subjects;
					}
				},
				fail: () => {},
				complete: () => {}
			}); */
			// #ifdef APP-PLUS || MP-WEIXIN
			//只在安卓、苹果、微信小程序有动画效果
			this.animation = uni.createAnimation();
			// #endif
			
			//新片榜静态数据
			
			this.refush_new_movies();
		},
		onUnload() {
			// 页面卸载的时候，清除动画数据
			this.animationData = {};
			this.animationDataArr = [
				{},{},{},{},{}
			];
		},
		methods: {
			
			//新片榜静态数据 refush_new_movies
			refush_new_movies(){
				var json_data = require('../../static/mock_json/new_movies.json');
				//console.log(json_data.subjects)
				//随机取5个
				var rand_five_data = json_data.subjects.sort(()=>0.5-Math.random()).slice(0,5);
				//console.log(rand_five_data)
				
				this.likeList = rand_five_data;
				
				uni.stopPullDownRefresh();
			},
			// 实现点赞动画效果
			praiseMe(e) {
				// #ifdef APP-PLUS || MP-WEIXIN
				var gIndex = e.currentTarget.dataset.gindex;
				console.log(gIndex);
				// return;
				// 构建动画数据，并且通过step来表示这组动画的完成
				this.animation.translateY(-60).opacity(1).step({
					duration: 1000
				});
				
				// 导出动画数据到view组件，实现组件的动画效果
				// this.animationData = this.animation.export();
				this.animationData = this.animation;
				this.animationDataArr[gIndex] = this.animationData.export();

				// 还原动画
				setTimeout(function() {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					});
					//this.animationData = this.animation.export();
					
					this.animationData = this.animation;
					this.animationDataArr[gIndex] = this.animationData.export();
				}.bind(this), 2000)
				// #endif
			}
		},
		components: {
			scrollPoster,
			uniRate
		}
	}
</script>

<style>
	@import url("index.css");
</style>
